<template>
  <div class="home">
    <div style="position: relative">
      <div class="top" @click="$router.push('/search')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
        <input type="text" placeholder="搜索" />
      </div>
      <div class="tabs">
        <van-tabs @click="send" v-model="active">
          <van-tab
            :title="item.name"
            v-for="item in cate_list"
            :key="item._id"
          ></van-tab>
        </van-tabs>
      </div>
    </div>

    <div class="arctcon">
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" loading-text="正在加载中..." success-text="刷新成功" animation-duration="2000">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="get_article_list"
          :immediate-check="false"
        >
          <div
            v-for="item2 in article_list"
            :key="item2._id"
            class="box"
            @click="
              $router.push({
                name: 'detail',
                query: { article_id: item2._id ,},
              })
            "
          >
            <div>作者 ： {{ item2.author }}</div>
            <div>标题 ： {{ item2.title }}</div>
            <div
              :class="{
                hide: item2.poster_type == 1,
                rightimg: item2.poster_type == 2,
                actiImg: item2.poster_type == 3,
              }"
            >
              <img
                v-for="item3 in item2.imageSrc"
                :src="item3"
                alt=""
                :key="item3._id"
              />
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <tFooter></tFooter>
  </div>
</template>

<script>
import tFooter from "@/components/index.vue";
import { Tab, Tabs, List, PullRefresh } from "vant";
export default {
  name: "HomeView",
  data() {
    return {
      cate_list: [],
      article_list: [],
      active: 0,
      active_cate_id: "", //当前被选中的分类id
      skip: 0, //当前被选中的分类总条数
      limit: 20, //当前被选中的分类总页数
      loading: false,
      finished: false,
      isRefresh: false, //  是否正在刷新
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    tFooter,
	
  },
  created() {
    // 获取分类
    this.get_cate_list();
  },
  methods: {
    //   下拉刷新
    onRefresh() {
      this.skip = 0;
      this.finished = false;
      this.get_article_list(true);
    },

    send() {
      this.active_cate_id = this.cate_list[this.active]._id;
      this.article_list = [];
      this.skip = 0;
      this.finished = false;

      this.get_article_list();
    },
    //  获取分类列表
    get_cate_list() {
      this.$http({
        url: "/api/get_cate_list",
        method: "POST",
        //传参
        data: {},
      }).then((res) => {
        console.log(res.data);
        this.cate_list = res.data;
<<<<<<< HEAD
         localStorage.setItem("tt-cateList", JSON.stringify(res));

=======
        this.active_cate_id = this.cate_list[this.active]._id;
        this.get_article_list();
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
      });
    },
    // 文章列表
    get_article_list(flag) {
      let { active_cate_id, skip, limit } = this;
      this.$http({
        url: "/api/get_article_list",
        method: "GET",
        //传参
        params: {
          cate_id: active_cate_id,
          skip,
          limit,
        },
      }).then((res) => {
        console.log(res.data);
<<<<<<< HEAD
        this.article_list = res.data;
        });
=======
        if (flag) {
          //  如果是刷新操作
          this.isRefresh = false; //  结束下拉刷新的转圈
          this.article_list = res.data; //  替换为新的
        } else {
          this.article_list.push(...res.data); //  新数据和老数据 拼接
        }

        // this.article_list.push(...res.data); //  新数据和老数据 拼接

        let len = this.article_list.length; //  数量

        //  判断数据加载完了吗    res.count 服务器返回  数据的总数

        if (len >= res.count) {
          this.finished = true; //  数据加载完了  再滑也别触发事件了
        } else {
          this.skip = len; // skip  更新
          this.loading = false; //  我可以继续去加载
        }
      });
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 375px;
  word-wrap: break-word;
  word-break: break-all;
  .arctcon {
    position: fixed;
    top: 95px;
    height: 650px;
    overflow: scroll;
  }

  /*搜索*/
  .top {
    width: 375px;
    height: 46px;
    background: @baseColor;
    position: fixed;
    top: 0;
    z-index: 1000;

    svg {
      position: absolute;
      width: 20px;
      height: 20px;
      left: 144px;
      top: 12px;
      color: #666;
    }
    input {
      width: 300px;
      height: 30px;
      margin-left: 32px;
      margin-top: 6px;
      border: none;
      border-radius: 15px;
      background: #efeeec;
      color: rgb(239, 242, 243);
      text-align: center;
    }
  }
  /*内容*/
  ::v-deep .van-tabs__line {
    display: none;
  }
  ::v-deep .van-tab {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
  }
  ::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
    padding: 0;
  }
  ::v-deep .van-tab--active {
    border-bottom: 3px solid @baseColor;
  }

  /*::v-deep .van-tabs--line .van-tabs__wrap {
    position: fixed;
    top: 45px;
  }*/
  .tabs {
    position: fixed;
    top: 45px;
  }
  ::v-deep .van-list__finished-text {
    padding-bottom: 50px;
  }

  .box {
    width: 100%;
    padding-top: 20px;
    /* 
    position: fixed;
    top: 100px;
    overflow: scroll;
    margin-top: 20px;
    padding-top: 75px;*/
    .rightimg {
      img {
        width: 100%;
        height: 200px;
        background-size: cover;
      }
    }
    .actiImg {
      img {
        width: 33%;
        height: 100px;
        background-size: cover;
      }
    }
  }
}
</style>
